<template>
  <div class="wrap" >
    <el-container>
      <el-header class="title-word" style="margin-top: 10px">创建客户</el-header>
      <el-main>
        <el-form ref="customerForm" :model="customerForm" :rules="rules"  label-width="120px" style="margin-left:20%;margin-right:25%">
          <el-form-item label="客户单位名称" prop="customerName" style="width: 100%;">
            <el-input v-model="customerForm.customerName" placeholder="请输入客户名称"  prop="customerName"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="linkPerson" style="width: 100%;">
            <el-input v-model="customerForm.linkPerson" placeholder="请输入联系人"  prop="linkPerson"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="linkPhone" style="width: 100%;">
            <el-input 
              oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              @blur="linkPhoneChange"
              v-model="customerForm.linkPhone" 
              placeholder="请输入联系方式"
              prop="linkPhone">
            </el-input>
          </el-form-item>
          <el-form-item label="联系地址"  prop="linkAddr" style="width: 100%;">
            <el-input placeholder="请输入联系地址" v-model="customerForm.linkAddr" prop="linkAddr"></el-input>
          </el-form-item>
          <!-- <el-form-item label="所属区域"  prop="areaName" style="width: 100%;">
            <el-input v-model="customerForm.areaName" placeholder="请输入所属区域"  prop="areaName"></el-input>
          </el-form-item> -->
          <el-form-item label="所属区域"  prop="areaName" style="width: 100%;">
            <el-cascader
              size="large"
              placeholder="请选择所属区域"
              :options="options"
              v-model="selectedOptions"
              style="width: 100%;"
              @change="handleChange"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="发票信息"  prop="invoiceInfo" style="width: 100%;">
            <el-input v-model="customerForm.invoiceInfo"></el-input>
          </el-form-item>
          <el-form-item label="传真"  prop="fax" style="width: 100%;">
            <el-input v-model="customerForm.fax"></el-input>
          </el-form-item>
          <el-form-item label="客户备注"  prop="remarks" style="width: 100%;">
            <el-input v-model="customerForm.remarks" style="width: 100%;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('customerForm')">立即创建</el-button>
            <el-button  @click="goback">取消</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
    import { regionData, CodeToText } from "element-china-area-data";
    export default {
      name: "createcustomer",
      data() {
        return {
          options: regionData,
          selectedOptions: [],
          dialogVisible: false,
          customerForm: {
            customerName: '',
            linkPerson: '',
            linkPhone: '',
            linkAddr: '',
            areaName: '',
            invoiceInfo: '',
            fax: '',
            remarks:''
          },
          rules: {
            customerName: [
              {required: true, message: '请输入客户名称', trigger: 'blur'},
            ],
            linkPerson: [
              {required: true, message: '请输入联系人', trigger: 'blur'},
            ],
            linkPhone: [
              {required: true, message: '请输入联系方式', trigger: 'blur'},
            ],
            linkAddr: [
              {required: true, message: '请输入联系地址', trigger: 'blur'},
            ],
            areaName: [
              {required: true, message: '请选择下单时间', trigger: 'blur'},
            ]
          }
        };
      },
      methods: {
        handleChange() {
          var loc = "";
          for (let i = 0; i < this.selectedOptions.length; i++) {
            loc += CodeToText[this.selectedOptions[i]];
          }
          this.customerForm.areaName=loc;
        },
        linkPhoneChange(e){
          this.supplierForm.linkPhone = e.target.value
        },
        onSubmit(FormName) {
          this.$refs[FormName].validate((valid) => {
            if (valid) {
              let params={
                "customerName":this.customerForm.customerName,
                "linkPerson":this.customerForm.linkPerson,
                "linkPhone":this.customerForm.linkPhone,
                "linkAddr":this.customerForm.linkAddr,
                "areaName":this.customerForm.areaName,
                "invoiceInfo":this.customerForm.invoiceInfo,
                "fax":this.customerForm.fax,
                "remarks":this.customerForm.remarks
              }
              this.$http.post("/hnhyscms_ws/customers/addCustomers",params,{emulateJSON:true}).then(
                success=>{})
              this.$confirm('创建成功')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
              this.$router.go(-1)
            } else {
              return false;
            }
          });
        },
        goback() {
          this.$router.go(-1)
        },

      }
    }
</script>

<style scoped>
  .title-word {
    font-size: 30px;
    line-height:50px;
  }
  .wrap{
    position: relative;
    height:100%;
    width: 100%;
    background-size: cover;
  }
</style>
